<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta name="format-detection" content="telephone=no, address=no, email=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="misapplication-tap-highlight" content="no" />
		<meta name="HandheldFriendly" content="true" />
		<link rel="stylesheet" href="../../css/mui.min.css" type="text/css" charset="utf-8" />
		<link rel="stylesheet" href="../../css/style.css" type="text/css" charset="utf-8" />
		<link rel="stylesheet" href="../../css/product.css" type="text/css" charset="utf-8" />
		<style> p{ margin-bottom: 0px; }  .mui-table-view .mui-table-view-cell { margin-bottom: 0.14rem; background: #fff; border-left:0.06rem solid #0ab0e4}.mui-table-view .mui-table-view-cell.stop{border-left-color:#999}  .mui-table-view .mui-table-view-cell p { line-height: 1; color: #666; } .addWay { width: 1.86rem; display: inline-block; width: 1.86rem; display: inline-block; height: 0.65rem; padding: 0px; line-height: 0.65rem; }  .mui-icon-search{     position: absolute;
    right: 0;padding: 0 3px;
    line-height: 0.65rem;
    background: #0ab0e4;
    color: #fff; } .mui-icon-closeempty{position: absolute; right:35px;background:transparent} #searchValue, #searchValue2 { height: 0.65rem; line-height: 0.65rem; width: 90%; padding: 0px; padding-left: 3px; border-radius: 0; margin: 0px; border: none; } 
		.mui-bar-nav ~ .mui-content .mui-pull-top-pocket{
			  top: 190px !important;
		}
		.mui-icon-closeempty:before{
			border: 1px solid #999;border-radius: 50%;font-size: 14px;font-weight: bold;
		}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav mui-header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">经销商管理</h1>
		</header>

		<div class="mui-content">
			<div>
				<label style="width:10%;display: inline-block;">产品</label>
				<div class="mui-select" style="width:88%;display: inline-block;">
					<select id="jd" onchange="getList()" style="height:0.65rem;line-height:0.65rem;padding:0px 0px 0px 5px;border-radius: 0;"></select>
				</div>
				<div class="" style="margin-bottom:0.15rem;border:1px solid #0ab0e4;border-radius:2px;">
					<span class="control-item mui-active" onclick="tabClicked(this,1)" style="border-left: none;">下级渠道 </span>
					<span class="control-item" onclick="tabClicked(this,2)">上级渠道</span>
				</div>
				
				<div  id="addway1" >
					<div style="width:4.95rem;display: inline-block;position:relative;background:#fff;border:none;">
						<span class="mui-icon mui-icon-search" onclick="search()"></span>
						<span class="mui-icon mui-icon-closeempty" style="color: #999;" onclick="clearSearch('addway1')"></span>
						<input type="text" class="" placeholder="搜索经销商姓名或电话号码" onkeyup="search(1,event,'addway1')" id="searchValue">
					</div>
					<button type="button"  class="mui-btn mui-btn-primary mui-btn-full addWay" onclick="openjxsInfoRegister()">添加渠道</button>
				</div>
				
				<div id="addway2" class="none">
					<div style="width:100%;display: inline-block;position:relative;background:#fff;border:none;">
						<span class="mui-icon mui-icon-search" onclick="search()"></span>
						<span class="mui-icon mui-icon-closeempty" style="color: #999;" onclick="clearSearch('addway2')"></span>
						<input type="text" class="" placeholder="搜索经销商姓名或电话号码" onkeyup="search(1,event,'addway2')" id="searchValue2">
					</div>
				</div>
			</div>
		</div>	
		
		 
		<nav class="mui-bar mui-bar-tab">
        <a class="mui-item" id="homeIndex"  > <span class="pic-icon pic-icon-home"></span> <span class="mui-tab-label">主页</span> </a>
		<a class="mui-item" id="main-inout" > <span class="pic-icon pic-icon-inout"></span> <span class="mui-tab-label">出入库</span> </a> 
		<a class="mui-item  mui-active" id="main-jxs"  > <span class="pic-icon pic-icon-jxs"></span> <span class="mui-tab-label">经销商</span> </a> 
		<a class="mui-item" id="main-center"  > <span class="pic-icon pic-icon-person"></span> <span class="mui-tab-label">个人中心</span> </a>
   </nav>
 
	</body>
	<script src="../../js/resize.js"></script>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/footer.js"></script>
	<script src="../../js/ajaxFun.js"></script>
 
	<script type="text/javascript">
		var productNo,searchValue=document.getElementById("searchValue"),product=document.getElementById("jd");
		var tabs = document.querySelectorAll('.control-item'); //上下级的tab选项卡
		var ad1=document.getElementById("addway1");
		var ad2=document.getElementById("addway2");
		var flag=1; //1表示下级 2表示上级
		window.addEventListener('stopThenReload', function(event) {
			flag = event.detail.flag;
			tabClicked(tabs[flag - 1], flag);
		});
		
		
		
		(function($, doc) {
			$.plusReady(function() {
				plus.nativeUI.closeWaiting();
				//获取经销商代理的产品
				ajaxFun.postFun(baseUrl + 'product/get/by/traderid.do', '', '', function(d) {
					if(d.data.length > 0) {
						productNo= d.data[0].porductNo;
						formProductList(d.data);
						mui.init({
			subpages:[{
								url:'jxsChild.html',
								id:'jxsChild',
								extras:{
									flag:flag,
									productNo:product.value?product.value:'',
									name:searchValue.value?searchValue.value.replace(/(^\s*)|(\s*$)/g, ""):''
								},
							    styles:{
									top: '200px',
									bottom: '100px',
									background:'transparent',
								}
							}]
		});
					}else{
						return false;
					}
				}); 
				
				mui.back=function(){
					openWindow('../home/index.html','homeIndex','','slide-in-left');
					return false;
				}
			})
		}(mui, document))
		
		function tabClicked(item, f) {/*出库入库Tab点击事件侦听获取下级经销商列表*/
			flag=f;
			searchValue.value='';
			if(flag==1){
				searchValue=document.getElementById("searchValue");
				addClass(ad2,'none');removeClass(ad1,'none');
				document.getElementById("addway2")
			}else{
				searchValue=document.getElementById("searchValue2");
				removeClass(ad2,'none');addClass(ad1,'none');
			}
			mui.each(tabs, function(index, i) {
				removeClass(i, 'mui-active');
			})
			addClass(item, 'mui-active'); 
			resetFormList();
		}
		
		
		function getList() {/*选择产品的时候重新获取经销商列表*/
			productNo=product.value;
			resetFormList();
		}

		function search(flag, e,idname) {/*搜索经销商*/
			flag = flag ? flag : '';
			if(flag == 1) {
				if(e.keyCode == 13) {
					resetFormList();
				}
			} else {
				resetFormList();
			}
		}
		
		function clearSearch(idname){
			searchValue.value='';
			resetFormList();
		}
		
		function openjxsInfoRegister(){/*添加经销商*/
			 openWindow('jxsInfoRegister.html', 'jxsInfoRegister',{flag:flag,productNo:product.value});	 
		}
		
		var detailPage=null;
		/*重置经销商*/
		function resetFormList() {
			var name=searchValue.value.replace(/(^\s*)|(\s*$)/g, "");
			if(name && testStr(name)) {
				plus.nativeUI.alert('不能包含非法字符！');
				return false;
			}
			if(name.length > 20) {
				plus.nativeUI.alert('不能超过20个字！');
				return false;
			}
			if(!detailPage){
			    detailPage = plus.webview.getWebviewById('jxsChild');
			} 
			
			  //触发重新加载子webview事件
			  mui.fire(detailPage,'reloadChild',{
			    flag:flag,
				productNo:product.value,
				name:searchValue.value?searchValue.value.replace(/(^\s*)|(\s*$)/g, ""):''
			  });
 
		}
		function formProductList(data){
			var html = '';
			for(var i = 0, len = data.length; i < len; i++) {
				var temp = data[i];
				html += '<option value="' + temp.porductNo + '">' + temp.productName + '</option>';
			}
			document.getElementById("jd").innerHTML = html;
		}
		

		
	</script>

</html>